<template>
  <div class="bg-white" id="knowledge">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <img
        slot="loading"
        class="loading-gif-refresh"
        src="../../assets/loading.gif"
      >
      <template v-if="list.length <= 0">
        <div class="no-data-img">
          <img src="../../assets/meeting/no-data.png">
          <p>暂无相关知识~</p>
        </div>
      </template>
      <van-list
        v-else
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoad"
      >
        <van-card v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
          <div v-if="item.img" slot="thumb">
            <van-image
              width="115"
              height="100"
              :src="`${$common.filePath}${item.img}`"
            />
          </div>
          <div slot="title">
            <p class="title-class van-multi-ellipsis--l2">{{ item.title }}</p>
          </div>
          <div slot="desc">
            <van-row type="flex" justify="space-between" class="desc-info">
              <van-col span="6">{{ item.name }}</van-col>
              <van-col :span="item.img?14:9" class="van-ellipsis">{{ item.date }}</van-col>
            </van-row>
            <van-row type="flex" justify="space-between" class="desc-info margin-t-10">
              <van-col span="6">
                <img class="eye-img" src="../../assets/mine/eye.png" />
                <span class="margin-l-5">{{ item.number }}</span>
              </van-col>
              <van-col :span="item.img?14:9">
                <img class="zhen-img" src="../../assets/mine/zhen.png" />
                <span class="margin-l-5">{{item.appendix_num + '个'}}</span>
              </van-col>
            </van-row>
          </div>
        </van-card>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script type="text/javascript">
  export default{
    data() {
      return {
        isLoading: false,
        loading: false,
        finished: false,
        page:1,
        list:[]
      }
    },
    activated() {
      // this.isLoading= false
      // this.loading= false
      // this.finished= false
      // this.page= 1
      // this.list= []
      this.$bridge.callHandler('navTitle', {title: '知识管理'})
      setTimeout(() => {
        this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
          responseCallback('h5 done!')
        })
      },500)
      this.showList(true)
    },
    methods: {
      /**
       * 下拉刷新
       * @return {[type]} [description]
       */
      onRefresh() {
        this.showList(true, false)
      },
      /**
       * 上拉加载
       * @return {[type]} [description]
       */
      onLoad() {
        this.showList(false, false)
      },
      /**
       * 显示数据
       * @return {[type]} [description]
       */
      showList(init, showToast) {
        this.isLoading = true
        if(init){
          this.page = 1
          this.finished = false
        }
        let config = {
          method: "post",
          url: `${this.$common.basePath}knowledge/knowledge_manage.php`,
          data: {
            do: "list",
            title: "",//主题，没有就传空，下面相同
            vstartdate: "",
            venddate: "",
            page: this.page++
          }
        }
        if (showToast) {
          this.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
        }
        if(!this.finished) {
          this.$axios(config).then(res => {
            this.list = init ? res.data.list : this.list.concat(res.data.list)
            this.loading = false
            this.isLoading = false
            if(this.list.length >= res.data.total) {
              this.finished = true
            }
            this.$toast.clear()
          }).catch(err => {
            this.$toast.clear()
            this.loading = false
            this.isLoading = false
          })
        }
      },
      /**
       * 详情
       * @return {[type]} [description]
       */
      toDetail(id){
        console.log(id)
        this.$router.push({ name:'knowledgeDetail', query:{ kid:id } })
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .bg-white{
    background-color: #fff;
    min-height: 100vh;
  }
  .align-center{
    text-align: left;
  }
  .desc-info{
    color: #999999;
    font-size: 12px;
    align-items: center;
  }
  .margin-t-10{
    margin-top: 10px;
  }
  .eye-img {
    width: 16px;
    height: 10px;
  }
  .zhen-img{
    width: 12px;
    height: 11px;
  }
  .margin-l-5 {
    margin-left: 5px;
  }
  .no-data-img{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40% 0 ;
    background-color: #fff;
    // height: 100vh;

    img{
      width: 180px;
      height: 106px;
      text-align: center;
    }

    p{
      font-size: 17px;
      color: #333333
    }
  }
</style>
<style type="text/css" lang="less">
  #knowledge{
    height: 100vh;
    .van-card{
      background-color: #fff;
      padding: 15px;
      border-bottom: 1px solid #F5F5F5;
    }
    p{
      margin: 0;
    }
    .title-class{
      font-size: 17px;
      font-weight: 600;
      margin: 5px 0;
      min-height: 48px;
    }
    .van-card__thumb{
      width: 115px;
      height: 100px;
      margin-right: 15px;
    }
    .van-card:not(:first-child){
      margin-top: 0;
    }
  }
</style>